$(document).ready(function() { 
  var length, 
   currentIndex = 0, 
   interval, 
   hasStarted = false, //是否已经开始轮播 
   t = 3000; //轮播时间间隔 
  length = $('.slider-panel').length; 
  //将除了第一张图片隐藏 
  $('.slider-panel:not(:first)').hide(); 
  //将第一个slider-item设为激活状态 
  $('.slider-item:first').addClass('slider-item-selected'); 
  //隐藏向前、向后翻按钮 
  $('.slider-page').hide(); 
  //鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动 
  $('.slider-panel, .slider-pre, .slider-next').hover(function() { 
   stop(); 
   $('.slider-page').show(); 
  }, function() { 
   $('.slider-page').hide(); 
   start(); 
  }); 
  $('.slider-item').hover(function(e) { 
   stop(); 
   var preIndex = $(".slider-item").filter(".slider-item-selected").index(); 
   currentIndex = $(this).index(); 
   play(preIndex, currentIndex); 
  }, function() { 
   start(); 
  }); 
  $('.slider-pre').unbind('click'); 
  $('.slider-pre').bind('click', function() { 
   pre(); 
  }); 
  $('.slider-next').unbind('click'); 
  $('.slider-next').bind('click', function() { 
   next(); 
  }); 
  /** 
   * 向前翻页 
   */
  function pre() { 
   var preIndex = currentIndex; 
   currentIndex = (--currentIndex + length) % length; 
   play(preIndex, currentIndex); 
  } 
  /** 
   * 向后翻页 
   */
  function next() { 
   var preIndex = currentIndex; 
   currentIndex = ++currentIndex % length; 
   play(preIndex, currentIndex); 
  } 
  /** 
   * 从preIndex页翻到currentIndex页 
   * preIndex 整数，翻页的起始页 
   * currentIndex 整数，翻到的那页 
   */
  function play(preIndex, currentIndex) { 
   $('.slider-panel').eq(preIndex).fadeOut(500) 
   .parent().children().eq(currentIndex).fadeIn(1000); 
   $('.slider-item').removeClass('slider-item-selected'); 
   $('.slider-item').eq(currentIndex).addClass('slider-item-selected'); 
  } 
  /** 
   * 开始轮播 
   */
  function start() { 
   if(!hasStarted) { 
   hasStarted = true; 
   interval = setInterval(next, t); 
   } 
  } 
  /** 
   * 停止轮播 
   */
  function stop() { 
   clearInterval(interval); 
   hasStarted = false; 
  } 
  //开始轮播 
  start(); 
  }); 




var music = new Audio();
//声明音乐列表
var musics = ["意淋 - 新不了情","张信哲 - 爱就一个字","张学友 - 三分拍",
"张学友 - 夕阳醉了","张盈 - 小丑","庄心妍 - 一万个舍不得 (爵士版)",
"蔡淳佳 - 南屏晚钟","蔡淳佳 - 雨天","蔡健雅 - 别找我麻烦","陈一发儿 - 走马"];
//用来标识当前播放音乐的序号（即数组下标）
var i = 0;

//当网页加载完成后执行函数
window.onload = function(){
  //获得网页上所有li
  var lis = document.getElementsByTagName("li");
  //对于这些li进行循环
  for(var i=0;i<lis.length;i++){
    //假设m就是某一个li
    var m = lis[i];
    //用m的index属性记住其播放序号
    m.index = i-8;
    //当用户单击该li时，执行函数
    m.onclick = function(){
      //取出当前li的播放序号
      i = this.index;
      
      //将音乐播放器的音乐设置为当前单击的音乐
      music.src = "images/"+this.innerHTML + ".mp3";
      cbtn.src="images/暂停.png";
      //播放音乐
      music.play();
      //显示音乐播放控制按钮
      bottombar.style.display = "block";
      var s= document.getElementById('geming').innerHTML=musics[i];
      document.getElementById('renxiang').src="images/"+s+ ".jpg";
    };
  }

  //单击暂停按钮执行函数
  cbtn.onclick = function(){
    //btntxt是按钮上的文字
    var img = this.src;
    //如果按钮上的文字是"暂停"，则执行暂停操作
    if(img == this.src){
       music.pause();
       this.src="images/播放.png";
    }
    if(img == this.src){
        music.play();
        this.src="images/暂停.png";
     }
  };
 
  //下一首按钮单击时执行下面函数
  nbtn.onclick = function(){
    console.log(i)
    //如果现在播放器播放的是最后一首歌
    if(i>=musics.length-1){
      //则切到第一首歌
      
      i = 0;
    }else{
      //否则切到下一首歌
      i++;
    }
    
    music.src = "images/"+musics[i] + ".mp3";
    music.play(); 
    cbtn.src="images/暂停.png";
    geming.innerHTML =musics[i];
    document.getElementById('renxiang').src="images/"+musics[i] + ".jpg";
  }
  dbtn.onclick = function(){
    //如果现在播放器播放的是最后一首歌
    if(i<=0){
      //则切到第一首歌
      i = 9;
    }else{
      //否则切到下一首歌
      i--;
    }
    
    music.src = "images/"+musics[i] + ".mp3";
    music.play(); 
    cbtn.src="images/暂停.png"
  }
 
  
};
